<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column")
            div(class="flex-column-item h3") 
              div(class="flex-row under-line")
                div(class="flex-row-item flex-center-center flex-2") -装药排气-
                div(class="flex-row-item right") {{activeId+1}}/{{menus.length}}
            div(class="flex-column-item flex-center h3",v-for="menu in currentPageMenus",
            :class="{'selected-text': menu.id == activeId ? true: false}") {{menu.name}}
</template>

<script>
import MenuList from "@/mixins/MenuList";
export default {
  mixins: [MenuList],
  data() {
    return {
      page: { maxResultCount: 3, skipCount: 0 },
      visible: false
    };
  },
  computed: {
    menus() {
      const menus = [
        { name: "1.螺杆复位", id: 0, to: "reset" },
        { name: "2.推进排气", id: 1, to: "exhaust" },
        { name: "3.排气回顾", id: 2, to: "exhaust-history" },
        { name: "4.复位回顾", id: 3, to: "reset-history" },
        { name: "5.日总量回顾", id: 4, to: "day-history" },
        { name: "6.警示回顾", id: 5, to: "warning-history" }
      ];
      return menus;
    },
    currentPageMenus() {
      var start = this.skipCount;
      var end = this.skipCount + this.page.maxResultCount;
      return this.menus.slice(start, end);
    }
  },
  methods: {
    up() {
      if (this.activeId == 0) {
        this.activeId = this.menus[this.menus.length - 1].id;
      } else {
        this.activeId = this.activeId - 1;
      }
    },
    down() {
      if (this.activeId == this.menus[this.menus.length - 1].id) {
        this.activeId = 0;
      } else {
        this.activeId = this.activeId + 1;
      }
    },

    back() {
      if (this.visible) {
        this.visible = !this.visible;
      } else {
        this.$router.push("/menu?index=2");
      }
    },
    yes() {
      if (this.visible) {
        this.visible = !this.visible;
        return;
      }

      var active = this.menus.find(menu => {
        return menu.id == this.activeId;
      });
      if (active.showModal) {
        this.visible = true;
      } else {
        this.$router.push(active.to);
      }
    }
  }
};
</script>

<style lang="less">
</style>
